import 'dart:io';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:toolbox/page/video_edit/state.dart';
import 'package:toolbox/widgets/buttons.dart';
import 'package:video_compress/video_compress.dart';

import 'logic.dart';

class VideoEditPage extends StatelessWidget {
  VideoEditPage({Key? key}) : super(key: key);

  final VideoEditLogic logic = Get.put(VideoEditLogic());
  final VideoEditState state = Get.find<VideoEditLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          padding: const EdgeInsets.all(8.0),
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children:[
              Obx(() {
                return Stack(
                  children: [
                    GestureDetector(
                      onTap: logic.onSelectedVideo,
                      child: Container(
                        width: 200,
                        height: 200,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(12),
                          border: Border.all(color: Colors.grey),
                          color: Colors.grey.withOpacity(.2),
                        ),
                        alignment: Alignment.center,
                        child: state.originalFileThumbnail.value != null ? SizedBox(
                          height: 200,
                          child: Image.file(state.originalFileThumbnail.value ?? File('')),
                        ) : const Icon(Icons.add),
                      ),
                    ),
                    Positioned(
                      right: 0,
                      top: 0,
                      child: Visibility(
                        visible: state.originalFileThumbnail.value != null,
                        child: IconButton(
                          icon: const Icon(Icons.delete_outline),
                          onPressed: logic.onDeleteSelected,
                        ),
                      ),
                    ),
                  ],
                );
              }),
              const SizedBox(height: 10),
              DropdownMenu(
                menuHeight: 400,
                dropdownMenuEntries: VideoQuality.values
                    .map((e) => DropdownMenuEntry(value: e, label: e.name))
                    .toList(),
                initialSelection: VideoQuality.DefaultQuality,
                onSelected: logic.onSelectedVideoQuality,
              ),
              const SizedBox(height: 10),
              MainButton(text: '视频压缩', onTap: logic.onTapCompressVideo,),
              const SizedBox(height: 10),
              MainButton(text: '转GIF', onTap: logic.onTapToTrimmer,),
              const SizedBox(height: 10),
              Obx(() {
                return Text(
                  '压缩前大小：${state.originalSize}MB${state.compressedFileThumbnail.value == null ? '' : ', 压缩后大小：${state.compressedSize}MB'}',
                );
              }),
              const SizedBox(height: 10),

              Obx(() {
                if (state.compressedFileThumbnail.value != null) {
                  return Column(
                    children:[
                      GestureDetector(
                        onTap: () => logic.onTapPlayVideo(state.compressedFile!),
                        child: Container(
                          width: 200,
                          height: 200,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(12),
                            border: Border.all(color: Colors.grey),
                            color: Colors.grey.withOpacity(.2),
                          ),
                          alignment: Alignment.center,
                          child: state.compressedFileThumbnail.value != null ? SizedBox(
                            height: 200,
                            child: Image.file(state.compressedFileThumbnail.value ?? File('')),
                          ) : const Icon(Icons.add),
                        ),
                      ),
                      const SizedBox(height: 10),
                      MainButton(text: '保存', onTap: logic.onSaveVideo,),
                    ],
                  );
                } else {
                  return Container();
                }
              }),
            ],
          ),
        ),
      ),
    );
  }
}
